<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="icon iconfont icon-jifen"></i> 会员列表</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div class="container">
            <div class="handle-box">
                会员昵称：
                <el-input v-model="userName" placeholder="请输入会员昵称" class="handle-input"></el-input>
                手机号码：
                <el-input v-model="mobile" type="number" placeholder="请输入会员手机号" class="handle-input"></el-input> 
                <el-button type="primary" icon="search" @click="search">查询</el-button>
            </div>
            <el-table :data="tableData" border style="width: 100%" >
                <el-table-column prop="id" label="ID" width="60" align="center">
                </el-table-column>
                <el-table-column prop="nick_name" label="用户昵称" width="200">
                </el-table-column>
                <el-table-column prop="mobile" label="联系方式" >
                </el-table-column>
                <el-table-column prop="registe_time" label="注册日期" >
                </el-table-column>
                <!-- <el-table-column label="操作" >
                    <template slot-scope="scope">
                      <el-button size="small" @click="showDetails(scope.$index, scope.row)">查看详情</el-button>
                      <el-button size="small" @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                      <el-button size="small" type="danger" @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                    </template>
                </el-table-column> -->
            </el-table>
            <div class="pagination" v-show="totalPages>1">
                    <el-pagination @current-change="handleCurrentChange" layout="prev, pager, next" :page-size="pageSize" :total="totalElements" background>
                    </el-pagination>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name:"news",
    data () {
        return {
            pageIndex:1,//当前页码
            pageSize:10,//每页10条
            totalElements:1,//默认的总条数
            totalPages:1,//默认的总页数
            userName:'',//查看 会员昵称
            mobile:'',//查询手机号码
            registe_time: '',// 会员注册时间
            tableData:[]//表格数据

        }
    },
    created() {
            this.getMemberData();
    },
    methods: {
        //获取tabs数据
        getMemberData (){
            const querystring = require('querystring');
            const param ={
                nickName:this.userName,
                mobile:this.mobile,
                pageIndex:this.pageIndex,
                pageSize:this.pageSize,
                registe_time: this.registe_time
            }
            this.$axios.post('manage/member/list',querystring.stringify(param)).then(response=>{
                console.log(response);
                if(response.data.code==200){
                    this.tableData = response.data.data.currData;//赋值 table 列表数据
                    this.totalElements = response.data.data.totalElements; //总条数
                    this.totalPages = response.data.data.totalPages;//更新分页总页数
                }else{
                    this.$notify.error({
                        title: '获取会员信息失败',
                        duration:2000,
                        message: '失败原因：'+response.data.msg
                    });
                }

            }).catch(error=>{
                console.log(error);
            });
        },
        //查询
        search (){
            this.pageIndex = 1;
            this.getMemberData();
        },
        // 分页导航
        handleCurrentChange (val){
            console.log(val)
            this.pageIndex = val;
            this.getMemberData();
        },
        deleteRow (){

        }

    }
}
</script>
<style lang="stylus" scoped>
    .handle-box {
        margin-bottom: 20px;
    }

    .handle-select {
        width: 120px;
    }

    .handle-input {
        width: 250px;
        display: inline-block;
        margin-right :30px;
    }
    .del-dialog-cnt{
        font-size: 16px;
        text-align: center
    }
</style>
